<template>
  <div id="advertising-detail" class="Row_content">
    <Row type="flex" justify="center">
      <Col>
        <div class="header-title">查看广告详情</div>
        <div class="content-detail">
          <Form :label-width="110">
            <FormItem label="广告名称：" prop="adName">
              <p>{{formValidate.adName}}</p>
            </FormItem>
            <FormItem label="广告位：" prop="adPlaceName">
              <p>{{formValidate.adPlaceName}}</p>
            </FormItem>
             <FormItem label="广告ID：" prop="adNo">
              <p>{{formValidate.adNo}}</p>
            </FormItem>
            <FormItem label="广告位类型：" prop="adPlaceType">
              <p>{{ formValidate.adPlaceType===0?"Banner":formValidate.adPlaceType===1?"启动页全屏":formValidate.adPlaceType===2?"通栏":"" }}</p>
            </FormItem>
            <FormItem label="投放类型：" prop="adType">
              <p>{{ formValidate.adType===0?"按品牌":formValidate.adType===1?"按门店":"" }}</p>
            </FormItem>
            <FormItem v-if="formValidate.adType===0" label="投放品牌：" prop="relaIdsName">
              <p>{{relaIdsName}}</p>
            </FormItem>
            <FormItem v-if="formValidate.adType===1" label="投放门店：" prop="relaIdsName">
              <p>{{relaIdsName}}</p>
            </FormItem>
            <FormItem label="展示时间：" prop="beginAt">
              <p>{{formValidate.beginAt}} - {{formValidate.endAt}}</p>
            </FormItem>
            <FormItem label="广告素材：" prop="mediaUrl">
              <img
                v-if="mediaUrlType===0"
                :src="formValidate.mediaUrl?formValidate.mediaUrl:defaultUrl"
                style="display: inline-block;width:96px;height:96px;vertical-align: top;"
                alt
              />
              <video
                v-if="mediaUrlType===1"
                :src="formValidate.mediaUrl?formValidate.mediaUrl:defaultUrl"
                controls="controls"
                style="display: inline-block;width:300px;height:200px;vertical-align: top;"
              ></video>
            </FormItem>
            <FormItem label="跳转链接：" prop="jumpUrl">
              <p>{{formValidate.jumpUrl}}</p>
            </FormItem>
          </Form>
        </div>
      </Col>
    </Row>
  </div>
</template>

<script>
import { getBrandList } from '@/api/merchant.js'
// import { getShopList } from '@/api/system/store'
import { getOrgAllTree } from '@/api/system/org'
import { adGet } from '@/api/advertising/index'
export default {
  name: 'advertising_detail',
  data () {
    return {
      formValidate: {},
      defaultUrl: '',
      relaIds: [],
      relaIdsName: '',
      mediaUrlType: 0
    }
  },
  created () {
    this.getDetail()
  },
  methods: {
    // 查询门店名称
    getShopList () {
      getOrgAllTree({
        permissionCode: 'moms:globalsetting:addetail',
        merchantId: this.$store.state.user.merchantId, // 商户id
        orgType: 1,
        status: 1
      })
        .then(res => {
          if (res.data.status === 200) {
            let shopNameStr = res.data.data.childList
              .filter(shop => this.relaIds.indexOf(shop.id) > -1)
              .map(shop => shop.orgName)
              .join('、')
            this.relaIdsName = shopNameStr
          }
        })
        .catch(error => {
          this.$Message.error(`${this.showError(error)}`)
        })
    },
    // 查询品牌列表
    getBrandList () {
      getBrandList({
        merchantId: this.$store.state.user.merchantId // 商户id
      })
        .then(res => {
          const result = res.data || {}
          if (result.status === 200) {
            let brandNameStr = result.data
              .filter(brand => this.relaIds.indexOf(brand.brandId) > -1)
              .map(brand => brand.brandName)
              .join('、')
            this.relaIdsName = brandNameStr
          } else {
            this.$Message.error(`${result.error}`)
          }
        })
        .catch(err => {
          this.$Message.error(`${err}`)
        })
    },
    // 查询单个广告位详情
    getDetail () {
      adGet({
        merchantId: this.$store.state.user.merchantId,
        adId: this.$route.params.id,
        showAll: true
      }).then(res => {
        if (res.data.status === 200) {
          this.formValidate = res.data.data
          this.relaIds = res.data.data.relaIds || []
          if (res.data.data.mediaUrl.indexOf('.mp4') > -1) {
            this.mediaUrlType = 1
          } else {
            this.mediaUrlType = 0
          }
          if (res.data.data.adType === 0) {
            this.getBrandList()
          } else if (res.data.data.adType === 1) {
            this.getShopList()
          }
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
#advertising-detail {
  .header-title {
    font-family: PingFangSC-Medium;
    font-size: 14px;
    color: #17233d;
    font-weight: bold;
    margin: 17px 36px;
  }
  .content-detail {
    font-size: 12px;
    margin-left: 64px;
    .ivu-form-item {
      margin-bottom: 0;
    }
  }
}
</style>
